<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";
import { horse } from "horsejs.org";
let minimizeBtnClick = () => {
  horse.window.minimize();
};
let maximizeOrRestoreBtnClick = (e: MouseEvent) => {
  let dom = e.target as HTMLElement;
  if (dom.classList.contains("horse-maximize")) {
    horse.window.maximize();
  } else {
    horse.window.restore();
  }
};
let closeBtnClick = () => {
  horse.window.close();
};
onMounted(() => {
  horse.window.addEventListener("maximize", () => {
    let toolDom = document.querySelector(".titleTool") as HTMLElement;
    toolDom.children[1].classList.remove("horse-maximize");
    toolDom.children[1].classList.add("horse-restore");
  });
  horse.window.addEventListener("unMaximize", () => {
    let toolDom = document.querySelector(".titleTool") as HTMLElement;
    toolDom.children[1].classList.remove("horse-restore");
    toolDom.children[1].classList.add("horse-maximize");
  });
});
</script>

<template>
  <div class="titleBar">
    <div class="titleLogo">
      <!-- <img src="logo.png" /> -->
    </div>
    <div class="titleText">kifu</div>
    <div class="titleTool">
      <div @click="minimizeBtnClick" class="iconfont horse-minimize"></div>
      <div
        @click="maximizeOrRestoreBtnClick"
        class="iconfont horse-maximize"
      ></div>
      <div @click="closeBtnClick" class="iconfont horse-close closeBtn"></div>
    </div>
  </div>
</template>

<style scoped>
.titleBar {
  -webkit-app-region: drag;
  height: 38px;
  line-height: 38px;
  background-color: rgb(220, 180, 100);
  display: flex;
}
.titleLogo {
  padding: 10px;
}
.titleLogo img {
  width: 18px;
  height: 18px;
}
.titleText {
  height: 38px;
  line-height: 38px;
  flex: 1;
}
.titleTool {
  -webkit-app-region: no-drag;
  height: 38px;
  float: right;
  color: white;
  line-height: 38px;
  display: flex;
  justify-content: flex-end;
}
.titleTool div {
  text-align: center;
  width: 42px;
  height: 38px;
  font-size: 13px;
}
.titleTool div:hover {
  background-color: rgb(200, 160, 80);
}
.closeBtn:hover {
  background-color: rgb(251, 21, 38) !important;
}
</style>
